import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {Link, NavLink} from 'react-router-dom';

class App extends Component {
  //如果用到props这个构造函数一定要写
  constructor(props) {
    super(props);
    console.log(props);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div>
          <ul>
            {/* <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/other/10">Other</Link></li> */}
            <li><NavLink to="/" exact activeClassName="active">Home</NavLink></li>
            <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
            <li><NavLink to="/other/9" activeClassName="active">Other</NavLink></li>
          </ul>
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;
